<template>
  <div style="boxs">
    <ul>
      <van-search v-model="value" shape="round" background="#F7F9FA" @input="valChange" placeholder="请输入课程" />
      <li v-for="(data,index) in list" :key="index" @click="go(data)">
        <div class="left"><img :src="data.courseImg" alt=""><span>{{data.courseName}}</span></div>
        <div class="right">
          <van-icon name="arrow" />
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  mounted() {
    this.loading = true;
    this.queryCourse();
  },
  data() {
    return {
      list: [],
      emply: false,
      value: "",
      courseName: "",
      loading:false,
    };
  },
  methods: {
    queryCourse() {
      (async () => {
        let { data } = await this.get("/course/queryCourse", {
          userId: localStorage.getItem("id"),
          courseName: this.courseName,
        });
        this.list = data;
        this.loading = false;
        if (!data.length) {
          this.emply = true;
        }
      })();
    },
    valChange(val) {
      this.courseName = val;
      this.queryCourse();
    },
    go(val) {
      (async () => {
        let { data } = await this.get("/course/queryClassAllots", {
          courseId: val.courseId,
          userId: localStorage.getItem("id"),
          courseName: "",
        });
        console.log(data);
        if (data.length > 0) {
          this.$router.push({
            path: "/lessonlist",
            query: {
              id: val.courseId,
            },
          });
        } else {
          this.$toast.fail("请联系管理员重新分配课程");
          return;
        }
      })();
    },
  },
};
</script>
<style lang="scss" scoped>
.boxs {
  width: 100%;
}
/deep/ .van-search {
  padding: 0.1rem 0.24rem;
}
/deep/ .van-search__content {
  background-color: #fff;
  // height: 0.4rem;
}
ul {
  min-height: 100%;
  background-color: #f7f9fa;
  overflow: auto;
  li {
    width: 100%;
    height: 1rem;
    background: white;
    padding: 0.24rem;
    box-sizing: border-box;
    display: flex;
    width: 100%;
    justify-content: space-between;
    margin-bottom: 0.16rem;
    font-size: 0.3rem;
    color: #333333;
    img {
      width: 0.5rem;
      height: 0.5rem;
    }
    .left {
      display: flex;
      align-items: center;
      span {
        margin-left: 0.13rem;
      }
    }
  }
}
</style>